<template>
  <view class="container">


    <!-- 表单内容 -->
    <view class="form-container">
      <view class="form-item">
        <text class="form-label">开户省</text>
        <input class="form-input" type="text" placeholder="输入开户省" v-model="formData.bank_province" />
      </view>

      <view class="form-item">
        <text class="form-label">开户市</text>
        <input class="form-input" type="text" placeholder="输入开户市" v-model="formData.bank_city" />
      </view>

      <view class="form-item">
        <text class="form-label">开户名</text>
        <input class="form-input" type="text" placeholder="输入开户名" v-model="formData.member_name" />
      </view>

      <view class="form-item">
        <text class="form-label">银行账号</text>
        <input class="form-input" type="text" placeholder="输入银行账号" v-model="formData.bank_card" />
      </view>
      <view class="form-item">
        <text class="form-label">开户行</text>
        <input class="form-input" type="text" placeholder="输入开户行" v-model="formData.bank_name" />
      </view>
      <view class="form-item">
        <text class="form-label">开户支行</text>
        <input class="form-input" type="text" placeholder="输入开户支行" v-model="formData.bank_branch" />
      </view>

      <!-- 提交按钮 -->
      <button class="submit-btn" @click="submitForm">确认</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { showBankCard, editBankCard } from '@/api/bgame';
// 表单数据
const formData = ref({
  bank_name: '',
  bank_province: '',
  bank_city: '',
  member_name: '',
  bank_card: '',
  bank_branch: '',
});
const getAccount = async () => {
  const res: any = await showBankCard({});
  console.log('res', res);
  if (1 == res.result) {
    formData.value = res.data;
    uni.setStorageSync('selectedAccount', res.data || '');
  }
};
// 提交表单
const submitForm = async () => {
  // 表单验证
  if (!formData.value.bank_name) {
    uni.showToast({
      title: '请输入开户行',
      icon: 'none',
    });
    return;
  }

  if (!formData.value.bank_branch) {
    uni.showToast({
      title: '请输入开户支行',
      icon: 'none',
    });
    return;
  }

  if (!formData.value.bank_province) {
    uni.showToast({
      title: '请输入开户省',
      icon: 'none',
    });
    return;
  }

  if (!formData.value.bank_city) {
    uni.showToast({
      title: '请输入开户市',
      icon: 'none',
    });
    return;
  }

  if (!formData.value.member_name) {
    uni.showToast({
      title: '请输入开户名',
      icon: 'none',
    });
    return;
  }

  if (!formData.value.bank_card) {
    uni.showToast({
      title: '请输入银行账号',
      icon: 'none',
    });
    return;
  }

  // 提交数据
  uni.showLoading({
    title: '提交中...',
  });
  const res: any = await editBankCard(formData.value);
  uni.hideLoading();
  console.log('res', res);
  if (1 == res.result) {
    uni.showToast({
      title: '添加成功',
      icon: 'success',
    });

    // 返回上一页
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
    uni.setStorageSync('selectedAccount', formData.value || '');
  }
};
onLoad(() => {
  getAccount();
});
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 15px;
  background-color: #00a046;
  color: #fff;
}

.header-title {
  font-size: 16px;
  font-weight: 500;
}

.header-icons {
  display: flex;
  align-items: center;
}

.header-icon {
  margin-right: 15px;
}

.header-icon-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-container {
  background-color: #fff;
  padding: 0 15px;
}

.form-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.form-label {
  width: 80px;
  color: #333;
  font-size: 14px;
}

.form-input {
  flex: 1;
  font-size: 14px;
}

.submit-btn {
  margin-top: 30px;
  background-color: #00a046;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
  height: 44px;
  line-height: 44px;
}
</style>
